<template>
    <div class="image__card">
       <div class="image__name">
            {{ props.name }}
       </div>

       <div class="image__upload">

        <div class="upload__img" v-if="file_url">
            <el-image
                style="width: 100%; height: 100%; object-fit: contain; border-radius: 6px;"
                :src="file_url"
                fit="contain"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[file_url]"
                :initial-index="4"
                />
            
            <span @click="handleRemove" class="del__img"><svg-icon name="icon-chahao" :size="20"></svg-icon></span>
        </div>

        <el-upload ref="upload_ins" v-else action="#" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false" :limit="1" :class="{'file__upload': disabled, 'upload__contains': true}">
            
            <el-icon class="upload__icon"><Plus /></el-icon>
        </el-upload>

       </div>
    </div>
</template>
           
<script setup>
    import { ref, onMounted, defineEmits, defineProps } from "vue"
    import { Plus } from '@element-plus/icons-vue'
    import MessageBox from '@/utils/MessageBox';

    const emit = defineEmits(['change_field'])
    const props = defineProps({
        name: {
            type: String,
            default: '上传一张图片'
        },
        index: {
            type: Number,
            default: -1,
        }
    })

    const upload_ins = ref(null)
    const file_raw = ref(null)
    const file_url = ref(null)

    const disabled = ref(false)

    const handleRemove = () => {
        file_raw.value = null
        file_url.value = null
        disabled.value = false
        emit('change_field', file_raw.value, props.index)
    }

    const handleFileChange = (file, filelist)=>{

        // console.log(file)

        if (!['image/png', 'image/jpg', 'image/jpeg'].includes(file.raw.type)) {
            MessageBox.error('请上传格式为jpg,jpeg,png的图片')
            upload_ins.value.clearFiles()
            return false
        } else if (file.size / 1024 / 1024 > 10) {
            MessageBox.error('请上传小于10MB的图片')
            upload_ins.value.clearFiles()
            return false
        }
        
        file_raw.value = file
        file_url.value = URL.createObjectURL(file.raw)
        disabled.value = true
        emit('change_field', file_raw.value, props.index)

    }

    
    onMounted(()=>{
    
    })
    
</script>
<style scoped lang="scss">
    .image__card{
        // background-color: var(--wchime-bg-color-page);
        // border: 1px solid var(--el-border-color);
        width: 100%;
        height: 210px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        padding: 0px 0px;
        .image__name{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            // border-bottom: 1px solid #fff;
            font-weight: 600;
        }
        .image__upload{
            padding: 0 20px;
            height: calc(100% - 40px);
            width: 100%;
            display: flex;
        }
    }

    .upload__img {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        width: 150px;
        height: 150px;
        display: block;
        position: relative;
        user-select: none;
        .del__img{
            cursor: pointer;
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .del__img:hover{
            color: var(--wchime-color-highlight);
        }
        }

    :deep(.el-upload-list__item){
        justify-content: center;
    }

    :deep(.file__upload .el-upload-list .el-upload--picture-card){
        display: none;
    }
    
</style>
<style>
.upload__contains .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.upload__contains .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.upload__icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
</style>